<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="../assets/vant.css" />
  <script src="../assets/vue-2.6.14.min.js"></script>
  <script src="../assets/vant.min.js"></script>
  <style>
    .tab-content {
      min-height: calc(100vh - 50px);
      background: #F0F1F0;
      position: relative;
    }

    .grid-menu-item {
      height: 82px;
    }

    .cell-box {
      margin-top: 10px;
    }

    .icon-box {
      margin-right: 8px;
      display: flex;
      align-items: center;
    }

    .van-cell--large {
      padding-top: 24px;
      padding-bottom: 24px;
    }

    .my-tab .van-cell--large {
      padding-top: 18px;
      padding-bottom: 18px;
    }

    .menu-box {
      margin: -70px 16px 0;
      border-radius: 10px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    }

    .van-swipe__indicators {
      bottom: 76px;
    }

    .notice {
      display: flex;
      align-items: center;
      background: #FDF7DD;
      color: #ff9300;
      font-size: 12px;
      margin: 12px 16px;
      padding: 8px 16px;
      border-radius: 20px;
    }

    .notice div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0 4px 0 6px;
    }

    .step-info {
      display: flex;
      align-items: center;
      background: #e9f6ff;
      margin: 12px 16px;
      padding: 24px 12px;
      border-radius: 10px;
    }

    .step-info .step-title {
      font-weight: bold;
    }

    .step-info .step-detail {
      font-size: 12px;
      color: #010101;
      font-weight: 300;
      margin: 6px 0;
    }

    label {
      display: block;
    }

    .pop_file {
      width: 370px;
      display: block;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(153, 153, 153, 1);
      background: rgba(247, 247, 247, 1);
    }

    .pop_file video {
      width: 100%;
      height: 300px;
    }

    .van-uploader, .van-uploader__wrapper {
      width: 100%;
      display: block;
    }

    .van-loading {
      text-align: center;
      margin-top: 16px;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- <label id="labelr" class="pop_file file_cont" for="pop_video">
      <div class="pfevi">
        <div><i class="iconfont icon-tianjia1"></i></div>
        <div>点击上传视频</div>
      </div>
      <video controls id="videoId"></video>
      <input style="display: none;" id="pop_video" type="file" accept="audio/mp4,video/mp4"
        v-on:change="uploadFile($event,'2')" name="fileTrans" ref="file" value="" />
    </label> -->

    <!-- 首页 Tab -->
    <div v-if="active === 0" class="tab-content">
      <van-swipe indicator-color="white" :autoplay="3000">
        <van-swipe-item v-for="(image, index) in homeBanners" :key="index">
          <van-image :src="image" width="100%" height="270"></van-image>
        </van-swipe-item>
      </van-swipe>
      <div class="menu-box">
        <van-grid :border="false" :column-num="3">
          <van-grid-item @click="handleMenuClick(menu)" class="grid-menu-item" v-for="(menu, index) in homeMenus"
            :key="index" icon="photo-o" :text="menu.text">
            <template #icon>
              <van-image :src="menu.icon" width="50" height="50"></van-image>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="notice">
        <van-icon name="volume"></van-icon>
        <div>本 App 目前只支持视频考级，线下报名或咨询线下报名或咨询</div>
        <van-icon name="arrow"></van-icon>
      </div>
      <div class="step-info">
        <div class="text-info">
          <div class="step-title">步骤简介</div>
          <div class="step-detail">
            1. 开始报名 -> 2. App 内完成视频拍摄 -> 3. 支付费用 -> 4. 上传录制视频
          </div>
          <van-button color="#ff9300" size="small">考级流程</van-button>
        </div>
        <van-image width="100%" src="../assets/icons/tab1_step.png"></van-image>
      </div>
    </div>
    <!-- 考级 Tab -->
    <div v-if="active === 1" class="tab-content">
      <van-nav-bar title="视频考级" :left-arrow="false"></van-nav-bar>
      <van-image width="100%" height="200" src="../assets/icons/tab2_banner.png">
      </van-image>
      <div class="exam cell-box">
        <van-cell size="large" title="考前必读" value="去阅读" is-link>
          <template #icon>
            <div class="icon-box">
              <van-image src="../assets/icons/tab2_book.png" width="24" height="24" />
            </div>
          </template>
        </van-cell>
        <!-- <van-cell size="large" value="" is-link>
          <template #icon>
            <div class="icon-box">
              <van-image src="../assets/icons/tab2_video.png" width="24" height="24" />
            </div>
          </template>
          <template #title>
            <label for="pop_video">正式考级</label>
            <input style="display: none;" id="pop_video" type="file" accept="audio/*,video/*" @change="handleUploadVideo" name="fileTrans" value="" />
          </template>
          <label for="pop_video">去考级</label>
        </van-cell> -->
        <van-uploader :preview-image="false" accept="audio/*,video/*" v-model="videoFile" :after-read="handleUploadVideo">
          <van-cell size="large" title="正式考级" value="去考级" is-link>
            <template #icon>
              <div class="icon-box">
                <van-image src="../assets/icons/tab2_video.png" width="24" height="24" />
              </div>
            </template>
          </van-cell>
        </van-uploader>
        <van-loading size="36px" color="#1989fa" v-if="uploading">正在上传视频...</van-loading>
      </div>
    </div>
    <!-- 辅导 Tab -->
    <div v-if="active === 2" class="tab-content">
      <van-nav-bar title="考前辅导" :left-arrow="false"></van-nav-bar>
      <van-image width="100%" height="200" src="../assets/icons/tab3_banner.png">
      </van-image>
      <div class="guide cell-box">
        <template v-for="(menu, index) in guideMenus">
          <van-cell @click="handleMenuClick(menu)" :key="index" size="large" :title="menu.label" :value="menu.value"
            is-link>
            <template #icon>
              <div class="icon-box">
                <van-image :src="menu.icon" width="24" height="24"></van-image>
              </div>
            </template>
          </van-cell>
        </template>
      </div>
    </div>
    <!-- 我的 Tab -->
    <div v-if="active === 3" class="tab-content my-tab">
      <van-nav-bar title="我的" :left-arrow="false"></van-nav-bar>
      <div class="cell-box">
        <van-cell-group>
          <template v-for="(menu, index) in mineMenus">
            <van-cell size="large" :key="index" :title="menu.label" :value="menu.value" is-link>
              <template #icon>
                <div class="icon-box">
                  <van-image :src="menu.icon" width="16" height="16"></van-image>
                </div>
              </template>
            </van-cell>
          </template>
        </van-cell-group>
      </div>
    </div>

    <van-tabbar active-color="#e13953" v-model="active">
      <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item icon="video">考级</van-tabbar-item>
      <van-tabbar-item icon="chat">辅导</van-tabbar-item>
      <van-tabbar-item icon="manager">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</body>
<script>
  const pageTitle = {
    0: "首页",
    1: "考级",
    2: "考前辅导",
    3: "我的"
  }
  new Vue({
    el: '#app',
    data() {
      return {
        active: 0,
        video_url: '',
        videoFile: [],
        uploading: false,
        homeBanners: [
          '../assets/icons/tab1_banner1.png',
          '../assets/icons/tab1_banner2.png'
        ],
        homeMenus: [
          { icon: '../assets/icons/tab1_exam.png', text: '报名考试', page: 'user.html' },
          { icon: '../assets/icons/tab1_video.png', text: '视频考级' },
          { icon: '../assets/icons/tab1_score.png', text: '成绩查询', page: 'search-score.html' },
          { icon: '../assets/icons/tab1_book.png', text: '教材购买' },
          { icon: '../assets/icons/tab1_guide.png', text: '考前辅导' },
          { icon: '../assets/icons/tab1_music.png', text: '名曲欣赏' },
        ],
        examMenus: [
          { icon: '../assets/icons/tab2_book.png', label: '考前必读', value: '去阅读' },
          { icon: '../assets/icons/tab2_video.png', label: '正式考级', value: '去考级' },
        ],
        guideMenus: [
          { icon: '../assets/icons/tab3_guide_book.png', label: '辅导必读', value: '去阅读' },
          { icon: '../assets/icons/tab3_guide_video.png', label: '辅导视频', value: '去观看', page: 'guide-videos.html' },
        ],
        mineMenus: [
          { icon: '../assets/icons/tab4_user.png', label: '考生资料', value: 12345678 },
          { icon: '../assets/icons/tab4_safe.png', label: '安全中心' },
          { icon: '../assets/icons/tab4_order.png', label: '考级订单' },
          { icon: '../assets/icons/tab4_setting.png', label: '用户设置' }
        ]
      }
    },
    watch: {
      active(val) {
        document.title = pageTitle[val];
      }
    },
    mounted() {
      // window.navigator.mediaDevices.getUserMedia({ video: true })
    },
    methods: {
      handleMenuClick(menu) {
        if (menu.page) {
          location.href = menu.page;
        }
      },
      handleUploadVideo() {
        console.info(this.videoFile)
        this.uploading = true;
        setTimeout(() => {
          this.uploading = false;
          this.$notify({ type: 'success', message: '上传成功' });
        }, 3000);
      },
      getFileURL(file) {
        var getUrl = null;
        if (window.createObjectURL != undefined) { // basic
          getUrl = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          getUrl = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
      },
      uploadFile(ev, typer) {
        var that = this;
        var filesId = document.getElementById('pop_video');
        var videoId = document.getElementById('videoId');
        var url = this.getFileURL(filesId.files[0]); //把当前的 files[0] 传进去
        if (url) {
          videoId.src = url;
        }
        var duration = videoId.duration;
        if (Math.floor(duration) > 60) {
          that.$layer.msg('视频不能大于60秒');
        }
      }
    }
  });
</script>

</html>